<template>
    <div>
        <ul class="logo">
            <li class="item-show-but">
                <span>
                </span>
            </li>
            <li class="search">
                <el-input
                        placeholder="请输入内容"
                        v-model="input"
                        clearable>
                </el-input>
            </li>
        </ul>
        <ul class="info">
            <li>
                <img class="avatar" src="../assets/static/avatar/img_2.png">
            </li>
            <li>
                <span>{{username}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "header-view",
        props: {
            username: String
        },
        data(){
            return{
                input:''
            }
        }
    }
</script>

<style scoped>

    .logo{
        height: 100%;
        align-items: center;
    }
    .logo li{
        float:left;
        list-style:none;
        padding-right: 10px;
    }
    .header-name{
        font-size: 1em;
        color: #E9EEF3;
        text-align: left;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .info{
        float:right;
        list-style:none;
        padding-right: 10px;
    }
    .info li{
        float: right;
        padding-right: 10px;
    }
    .info li img{
        width: 35px;
        height: 35px;
        vertical-align:middle;
        border-radius: 30%;
    }
</style>
